import React, {
  useState,
  useRef,
  useEffect,
  memo,
  useLayoutEffect,
} from 'react';
import * as echarts from 'echarts';
import moment from 'moment';
import { PageContainer } from '@ant-design/pro-layout';
import { Modal,Button, Typography, Switch, Input ,Table} from 'antd';
import { connect } from 'dva';
import styles from './index.less'


class DataforCars extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      speedDatas:[],
      positionDatas:[],
      beginDate:null,
      endDate:null,
      bar1Data:[],
      bar2Data:[],
      lineData:[],
      visible:false,
      formLoading:false,
      alreadyDate:{
        beginDate:null,
        endDate:null
      }
    }
    this.showModal = this.showModal.bind(this)
    this.handleOk = this.handleOk.bind(this)
    this.handleCancel = this.handleCancel.bind(this)
    this.handOnchange1 = this.handOnchange1.bind(this)
    this.handOnchange2 = this.handOnchange2.bind(this)
  }
  componentDidMount(){
    const d = new Date();
    console.log(d.getHours())
    const nowDate = moment(d).format('YYYY-MM-DD h:mm:ss')
    this.setState({alreadyDate:{
      beginDate:nowDate,
      endDate:null
    }})
    // const chartDom = document.getElementById('main');
    // let myChart = echarts.init(chartDom);

    // let option = {
    //     tooltip: {
    //         trigger: 'axis',
    //         axisPointer: {
    //             type: 'cross',
    //             crossStyle: {
    //                 color: '#999'
    //             }
    //         }
    //     },
    //     toolbox: {
    //         feature: {
    //             dataView: {show: true, readOnly: false},
    //             magicType: {show: true, type: ['line', 'bar']},
    //             restore: {show: true},
    //             saveAsImage: {show: true}
    //         }
    //     },
    //     legend: {
    //         data: ['蒸发量', '降水量', '平均温度']
    //     },
    //     xAxis: [
    //         {
    //             type: 'category',
    //             data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],//底部x轴数据
    //             axisPointer: {
    //                 type: 'shadow'
    //             }
    //         }
    //     ],
    //     yAxis: [
    //         {
    //             type: 'value',
    //             name: '水量',
    //             min: 0,
    //             max: 250,
    //             interval: 50,
    //             axisLabel: {
    //                 formatter: '{value} ml'//左边y轴
    //             }
    //         },
    //         {
    //             type: 'value',
    //             name: '温度',
    //             min: 0,
    //             max: 25,
    //             interval: 5,
    //             axisLabel: {
    //                 formatter: '{value} °C'//右边y轴
    //             }
    //         }
    //     ],
    //     series: [
    //         {
    //             name: '蒸发量',
    //             type: 'bar',
    //             data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]//左边第一个柱装图
    //         },
    //         {
    //             name: '降水量',
    //             type: 'bar',
    //             data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]//第二个
    //         },
    //         {
    //             name: '平均温度',
    //             type: 'line',
    //             yAxisIndex: 1,
    //             data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] //折线图数据
    //         }
    //     ]
    // };
    // option && myChart.setOption(option);
  }
  showModal(){
    this.setState({visible:true})
  }
  handOnchange1(e){
    console.log(e.target.value)
    this.setState({beginDate:e.target.value})
  }
  handOnchange2(e){
    console.log(e.target.value)
    this.setState({endDate:e.target.value})
  }
  handleOk(){
    this.setState({formLoading:true})
    const {dispatch} = this.props
    const params = {//拿到输入的请求参数
      beginDate:this.state.beginDate,
      endDate:this.state.endDate,
      vehicleId:this.props.match.params.vehicleId
    }
    dispatch({//获取 历史位置信息
      type:'dataforCars/reqHistoricalPositionByDate',
      payload:params
    })
    dispatch({//获取油耗信息
      type:'dataforCars/reqGetOilConsume',
      payload:params,
    })
    setTimeout(()=>{
      this.setState({visible:false})
      this.setState({formLoading:false})
      const chartDom = document.getElementById('main');
    let myChart = echarts.init(chartDom);

    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data: ['蒸发量', '降水量', '平均温度']
        },
        xAxis: [
            {
                type: 'category',
                data: ['02:27', '02:29', '02:37', '05:07', '05:09', '07:09', '07:17', '10:27', '10:29', '13:27', '16:27', '16:39'],//底部x轴数据
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '经度',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value} °'//左边y轴
                }
            },
            {
                type: 'value',
                name: '纬度',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value} °'//右边y轴
                }
            }
        ],
        series: [
            {
                name: '经度',
                type: 'bar',
                data: [30, 30, 30, 31, 29, 31, 31, 30, 32.6, 29, 30, 34]//左边第一个柱装图
            },
            {
                name: '纬度',
                type: 'bar',
                data: [101, 103, 103, 102, 100, 104, 105, 101, 102, 101, 106, 101]//第二个
            },
            {
                name: '油耗信息',
                type: 'line',
                yAxisIndex: 1,
                data: [30, 60, 90, 100, 120, 140, 200, 234, 239, 240, 245, 250] //折线图数据
            }
        ]
    };
    option && myChart.setOption(option);
    },2000)
  }
  handleCancel(){
    this.setState({visible:false})
  }
  render() {
    console.log(this.props.dataCollection);
    return (

      <PageContainer
        header={{
          title:'车牌号',
          breadcrumb: {
            routes: [
              {
                path: '/vehicle',
                breadcrumbName: '车辆信息',
              },
              {
                path: '/vehicle/:vehicleId/forCars',
                breadcrumbName: '历史信息'
              }
            ],
          },
        }}
      >
        <Modal
        title="时间编辑"
        visible={this.state.visible}
        onOk={this.handleOk}
        confirmLoading={this.state.formLoading}
        onCancel={this.handleCancel}
      >
        <Input addonBefore="起始时间" onChange={this.handOnchange1} defaultValue={this.state.alreadyDate.beginDate} />
        <Input addonBefore="结束时间" onChange={this.handOnchange2} defaultValue={this.state.alreadyDate.endDate} />
      </Modal>
        <Button type="primary" onClick={this.showModal}>
        点击录入开始时间与结束时间
        </Button>
        <div id="main" className={styles.echartStyle}></div>
      </PageContainer>
    )
    
    
  }
}

export default connect(({ dataforCars }) => ({ dataforCars }))(
  DataforCars,
);
